<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList">

		
			<template #top>
				<view class="top">
					<view class="searchbox">
						<searchs :istopage="false" @search="search"></searchs>
					</view>
				
				
					<view class="">
						<u-tabs :list="list1" :current="current" @change="oncurrent" lineColor="#000000"
							:inactiveStyle="{color:'#666',fontSize:'28rpx'}"
							:activeStyle="{color:'#222222',fontSize:'28rpx'}"></u-tabs>
					</view>
				</view>
			</template>

			<scroll-view scroll-x="true">
				<view class="class">
					<view class="classactive" v-if="current == 0">
						全部
					</view>
					<!-- 	<view class="classactive">
						750x1500cm
					</view> -->
					<view class="classItem" @click="onactivbe(index)" :class="summary.active == index ?'classactive':''"
						v-if="current != 0" v-for="(item,index) in summary.list" :key="index">
						{{item.name}}
					</view>
				</view>
			</scroll-view>


			<view class="goodslist">
				<view class="goodslistItem" v-for="(item,index) in dataList" :key="index" @click="topage(item)">
					<image class="goodslistItemimg" :src="item.design_image" mode=""></image>
					<view class="goodslistItemname xml32 xpb10">
						{{item.name}}
					</view>
				</view>
			</view>
	
	</z-paging>

</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';

	import searchs from '@/components/search/searchs.vue'
	import {
		searchlists,
		summarycategory,
		getcategory,
		indexsecond,
		summarylists,
		indexlists,
		zgybindexfirst
	} from '@/network/home.js'

	let list1 = ref([{
		name: '全部',
	}, {
		name: '汇总图',
	}])
	let current = ref(0)


	const topage = (data) => {
		uni.navigateTo({
			url: '/pages/index/goodsDetail?id=' + data.id
		})
	}

	const oncurrent = async (e) => {
		if (e.index == 0) {
			current.value = e.index
			paging.value.reload()
		}
		if (e.index == 1) {
			current.value = e.index
			await getsummary()
			

		}
		if (e.index > 1) {
			current.value = e.index
			await getTwoList()
		}

	}

	let keyword = ref('')

	const search = (e) => {
		console.log(e);
		keyword.value = e
		paging.value.reload()
	}
	const onactivbe = (index) => {
		summary.active = index
		
		paging.value.reload()
	}

	const paging = ref(null)

	const dataList = ref([])

	let summary = reactive({
		list: [],
		active: 0
	})
	// 汇总图二级

	const getsummary = () => {
		summary.active = 0
		summarycategory().then(res => {
			summary.list = []
			summary.list.push({
				id: '',
				name: '全部'
			}, ...res.data)
			paging.value.reload()
		})
	}

	// 获取一级分类
	let oneTypeList = ref([])
	getcategory().then(res => {
		let inlist = res.data.map(item => {
			return {
				id: item.id,
				name: `${item.first}*${item.second}*${item.three}mm`
			}
		})
		list1.value.push(...inlist)
	})

	// 获取二级分类
	const getTwoList = () => {
		summary.active = 0
		zgybindexfirst({
			id: list1.value[current.value].id
		}).then(res => {
			summary.list = []
			summary.list.push({
				id: '',
				name: '全部'
			}, ...res.data)
			paging.value.reload()
		})
	}





	const queryList = (pageNo, pageSize) => {

		if (current.value == 0) {
			ghetsearchlists({
				page_no: pageNo,
				page_size: pageSize,
				keyword:keyword.value
			})
		}

		if (current.value == 1) {
			getsummarylists({
				page_no: pageNo,
				page_size: pageSize,
				first_id:  list1.value[current.value].id,
				id: summary.list.length > 0 ? summary.list[summary.active].id : '',
				keyword:keyword.value
			})
		}
		if (current.value > 1) {
			getindexlists({
				page_no: pageNo,
				page_size: pageSize,
				id:list1.value[current.value].id,
				first_id: summary.list.length > 0 ? summary.list[summary.active].id : '',
				
				keyword:keyword.value
			})
		}

	}

	// 全部 筛选列表

	const ghetsearchlists = (data) => {
		searchlists(data).then(res => {
			paging.value.complete(res.data.lists);
		})
	}

	const getindexlists = (data) => {
		indexlists(data).then(res => {
			paging.value.complete(res.data.lists);
		})
	}

	// 汇总图
	const getsummarylists = (data) => {

		summarylists(data).then(res => {
			paging.value.complete(res.data.lists);
		})
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
	.top {
		background-color: #fff;
	}

	.searchbox {
		padding: 22rpx 30rpx 30rpx;
	}

	.box {
		padding: 30rpx;
	}


	.class {
		padding: 30rpx;
		display: flex;


	}

	.classItem {

		background: #EEEEEE;
		border-radius: 10rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #333333;
		line-height: 50rpx;
		text-align: center;
		padding: 12rpx 21rpx;
		flex-shrink: 0;
		margin-right: 20rpx;


	}

	.classactive {
		background: #000000;
		border-radius: 10rpx;
		font-weight: 500;
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 50rpx;
		padding: 12rpx 21rpx;
		flex-shrink: 0;
		margin-right: 20rpx;
	}

	.goodslist {
		padding: 31rpx;
		box-sizing: border-box;
		display: grid;
		gap: 20rpx 20rpx;

		grid-template-columns: repeat(2, 1fr);


	}

	.goodslistItem {
		width: 335rpx;
		height: 748rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.goodslistItemimg {
		width: 100%;
		height: 660rpx;
		background: #333;
		border-radius: 20rpx;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.goodslistItemname {
		font-weight: bold;
		font-size: 26rpx;
		color: #333333;
		margin-top: 23rpx;
	}
</style>